<template>
  <!-- 背景层保持统一风格 -->
  <view class="bg-layer"></view>
  
  <view class="container">
    <!-- 头部标题 -->
    <view class="header">
      <text class="title">学生注册</text>
      <view class="title-decoration"></view>
    </view>

    <!-- 表单区域 -->
    <view class="form-card">
      <!-- 输入框组 -->
      <view 
        v-for="(item, index) in inputFields" 
        :key="index"
        class="input-group"
        :class="{ 'input-focus': focusIndex === index }"
      >
        <uni-icons 
          :type="item.icon" 
          size="20" 
          :color="focusIndex === index ? '#4a90e2' : '#999'"
        ></uni-icons>
        <input
          class="input"
          v-model="form[item.field]"
          :placeholder="item.placeholder"
          :type="item.type || 'text'"
          @focus="focusIndex = index"
          @blur="focusIndex = -1"
        />
      </view>

      <!-- 头像上传 -->
      <view class="upload-section">
        <button 
          class="upload-button"
          @click="uploadAvatar"
          :style="{ background: form.avatar ? '#f0f7ff' : '' }"
        >
          <uni-icons type="plus" size="18" :color="form.avatar ? '#4a90e2' : '#fff'"></uni-icons>
          <text :style="{ color: form.avatar ? '#4a90e2' : '#fff' }">
            {{ form.avatar ? '更换头像' : '上传头像（可选）' }}
          </text>
        </button>
        <image 
          v-if="form.avatar" 
          :src="form.avatar" 
          class="avatar-preview"
          @click="previewAvatar"
        />
      </view>

      <!-- 注册按钮 -->
      <button 
        class="register-button"
        :class="{ 'button-loading': isRegistering }"
        @click="register"
      >
        <view v-if="isRegistering" class="spinner"></view>
        <text v-else>立即注册</text>
      </button>

      <!-- 登录链接 -->
      <view class="footer">
        <text class="login-link" @click="navigateTo('/pages/student/login')">
          已有账号？<text class="link-text">去登录</text>
        </text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
        name: '',
        student_id: '',
        major: '',
        class_id: '',
        avatar: ''
      },
      focusIndex: -1,
      isRegistering: false,
      inputFields: [
        { field: 'username', icon: 'person', placeholder: '请输入用户名' },
        { field: 'password', icon: 'locked', placeholder: '请输入密码', type: 'password' },
        { field: 'name', icon: 'contact', placeholder: '请输入姓名' },
        { field: 'student_id', icon: 'list', placeholder: '请输入学号' },
        { field: 'major', icon: 'compose', placeholder: '请输入专业' },
        { field: 'class_id', icon: 'group', placeholder: '请输入班级' }
      ]
    }
  },
  methods: {
    async uploadAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        success: async (res) => {
          uni.showLoading({ title: '上传中...', mask: true });
          try {
            const uploadRes = await uniCloud.uploadFile({
              filePath: res.tempFilePaths[0],
              cloudPath: `avatars/${Date.now()}_${Math.random().toString(36).substr(2, 9)}.jpg`
            });
            this.form.avatar = uploadRes.fileID;
            uni.showToast({ title: '上传成功', icon: 'success' });
          } catch (e) {
            uni.showToast({ title: '上传失败', icon: 'none' });
          } finally {
            uni.hideLoading();
          }
        }
      });
    },
    
    previewAvatar() {
      if (!this.form.avatar) return;
      uni.previewImage({
        urls: [this.form.avatar],
        current: this.form.avatar
      });
    },
    
    async register() {
      // 验证逻辑保持不变
      const requiredFields = ['username', 'password', 'name', 'student_id', 'major', 'class_id'];
      if (requiredFields.some(field => !this.form[field])) {
        return uni.showToast({ 
          title: '请填写所有必填信息', 
          icon: 'none',
          position: 'top'
        });
      }
      
      this.isRegistering = true;
      try {
        const res = await uniCloud.callFunction({
          name: 'register',
          data: { ...this.form, role: 'student' }
        });
        
        if (res.result.code === 0) {
          uni.showToast({ 
            title: '注册成功', 
            icon: 'success',
            complete: () => {
              setTimeout(() => {
                uni.navigateTo({ url: '/pages/student/login' });
              }, 1500);
            }
          });
        } else {
          uni.showToast({ 
            title: res.result.msg || '注册失败', 
            icon: 'none',
            position: 'top'
          });
        }
      } catch (e) {
        uni.showToast({ 
          title: `网络错误: ${e.message}` || '未知错误', 
          icon: 'none',
          position: 'top'
        });
      } finally {
        this.isRegistering = false;
      }
    },
    
    navigateTo(url) {
      uni.navigateTo({ url });
    }
  }
};
</script>

<style scoped>
/* 全局样式 */
.container {
  padding: 24px;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.bg-layer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 40vh;
  background: linear-gradient(135deg, #4a90e2 0%, #5aa1ff 100%);
  z-index: 0;
  border-radius: 0 0 20% 20%;
}

/* 头部样式 */
.header {
  text-align: center;
  margin: 40px 0 30px;
  position: relative;
}

.title {
  font-size: 28px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: relative;
  display: inline-block;
  padding: 0 20px;
}

.title-decoration {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: rgba(255,255,255,0.7);
  border-radius: 2px;
}

/* 表单卡片 */
.form-card {
  background: rgba(255,255,255,0.95);
  border-radius: 20px;
  padding: 30px 25px;
  box-shadow: 0 10px 30px rgba(74, 144, 226, 0.15);
  margin-bottom: 30px;
}

/* 输入框组 */
.input-group {
  display: flex;
  align-items: center;
  background: #f8fafc;
  border-radius: 14px;
  padding: 0 15px;
  margin-bottom: 20px;
  border: 1px solid #e1e8ed;
  transition: all 0.3s;
}

.input-group.input-focus {
  border-color: #4a90e2;
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}

.input {
  flex: 1;
  height: 50px;
  font-size: 16px;
  color: #333;
  padding: 0 12px;
  background: transparent;
}

/* 上传区域 */
.upload-section {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 20px 0;
}

.upload-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  background: linear-gradient(45deg, #4a90e2, #5aa1ff);
  border-radius: 14px;
  font-size: 15px;
  border: none;
  transition: all 0.3s;
}

.upload-button:active {
  opacity: 0.9;
  transform: scale(0.98);
}

.avatar-preview {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid #e1e8ed;
}

/* 注册按钮 */
.register-button {
  height: 56px;
  background: linear-gradient(45deg, #4a90e2, #5aa1ff);
  color: #fff;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 500;
  border: none;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
}

.register-button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 6px rgba(74, 144, 226, 0.3);
}

.button-loading {
  opacity: 0.8;
}

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s linear infinite;
}

/* 底部链接 */
.footer {
  text-align: center;
  margin-top: 25px;
  font-size: 14px;
  color: #666;
}

.login-link {
  display: inline-block;
  padding: 8px 0;
}

.link-text {
  color: #4a90e2;
  font-weight: 500;
  margin-left: 4px;
}

/* 动画 */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 响应式适配 */
@media (max-width: 375px) {
  .form-card {
    padding: 20px 15px;
  }
  .input {
    font-size: 15px;
  }
}
</style>